<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>手术室管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <style>
    /* 这段样式只是用于演示 */
    #LAY-component-grid-list .demo-list .layui-card {
      height: 360px;
    }

    #page span:hover {
      background-color: #009688;
      color: #fff;
    }

    .fr {
      float: right;
    }

    .layui-card-header .layui-icon {
      position: inherit;
      right: auto;
      top: auto;
    }
  </style>
</head>

<body>
  <div class="layui-fluid" id="LAY-component-grid-list">
    <div class="layui-row layui-col-space12 demo-list" id="view">
      <!-- 填充内容 -->
      <!-- 分页显示手术室的预约详情 -->
      <div class="layui-col-sm12 layui-col-md6 layui-col-lg6" v-if="showDetails" v-for="item in rooms.list">
        <!-- {{item}} -->
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="layui-inline">
              <span @click="getAllSurgeryRoomById(item.surgeryRoomId)">{{item.surgeryRoomName}}</span>
            </div>
            <div class="fr">
              <div class="layui-inline">
                <button v-if="item.useStatus"
                  class="layui-btn layui-btn-sm layui-bg-blue layui-icon layui-icon-rate-solid">可用</button>
                <button v-else class="layui-btn layui-btn-sm layui-bg-red layui-icon layui-icon-rate">异常</button>
              </div>
              <div class="layui-inline">
                <span style="display: none;">{{item.surgeryRoomId}}</span>
                <button type="button" class="layui-btn layui-btn-sm layui-icon layui-icon-edit"
                  data-method="editSurgeryRoom">编辑</button>
              </div>
            </div>
          </div>
          <div class="layui-card-body">
            <table class="layui-table">
              <colgroup>
              </colgroup>
              <thead>
                <tr>
                  <th>预约单号</th>
                  <th>预约人</th>
                  <th>预定开始时刻</th>
                  <th>预定结束时刻</th>
                </tr>
              </thead>
              <tbody>

                <tr v-for="bookings in item.surgeryBookings.list">
                  <td>{{bookings.bookingId}}</td>
                  <td>{{bookings.empId}}</td>
                  <td>{{bookings.bookingStartTime}}</td>
                  <td>{{bookings.bookingEndTime}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="layui-col-sm12 layui-col-md12 layui-col-lg12" v-if="showDetails">
        <div class="layui-card" id="page" style="height: 80px;">
          <div class="layui-card-body">
            <div class="layui-box layui-laypage layui-laypage-default">
              <span class="layui-laypage-prev" v-if="rooms.hasPreviousPage"
                @click="getAllSurgeryRoomsAndBookings(rooms.prePage)">上一页</span> <span data-page="2"
                v-for="pageNo in rooms.navigatepageNums" v-text="pageNo" @click="getAllSurgeryRoomsAndBookings(pageNo)">
              </span>
              <span href="javascript:;" class="layui-laypage-next" v-if="rooms.hasNextPage"
                @click="getAllSurgeryRoomsAndBookings(rooms.nextPage)">下一页</span>
            </div>
            <div class="layui-btn-group" style="position: absolute; right: 12px; margin: 10px 0;">
              <button type="button" class="layui-btn layui-icon layui-icon-add-1"
                data-method="addSurgeryRoom">增加手术室</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹出层开始 -->
  <div id="editSurgery" style="display: none;">
    <form class="layui-form" action="" lay-filter="addOrEditSurgeryRoom">
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">手术室id</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="surgeryRoomId" value="" readonly>
          </div>
        </div>

      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">手术室名</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="surgeryRoomName" lay-verify="required" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">手术室状态</label>
          <div class="layui-input-block">
            <input type='radio' name='useStatus' value='true' title='可用' checked>
            <input type='radio' name='useStatus' value='false' title='异常'>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">状态说明</label>
          <div class="layui-input-block">
            <input class="layui-input" type="text" name="situation" value="">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label">备注</label>
          <div class="layui-input-block">
            <textarea name="note" placeholder="请输入内容" class="layui-textarea"></textarea>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn layui-btn-sm layui-icon layui-icon-release" lay-submit="" lay-filter="editSurgerySubmit">提交</button>
          <button type="reset" class="layui-btn  layui-btn-sm layui-icon layui-icon-refresh layui-btn-warm">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 弹出层结束 -->
  <script src="../../layuiadmin/layui/layui.js"></script>
  <script src="../../js/axios.min.js"></script>
  <script src="../../js/vue.js"></script>
  <script>
    /* layui开始 */
    layui.config({
      base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index', 'layer', 'form', 'jquery'], function () {
      var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form;
      var addOrEditUrl;
      var mainIndex;
      var active = {

        // 编辑手术室信息
        editSurgeryRoom: function () {
          //页面层
          //console.log($(this).prev().text())
          var surgeryRoomId = $(this).prev().text()
          url = "/surgeryroom/roominfo?surgeryRoomId=" + surgeryRoomId
          //console.log(url)
          axios.get(url).then(function (resp) {
            data = resp.data
            console.log(data.data)
            mainIndex = layer.open({
              type: 1,
              title: "修改手术室信息",
              skin: 'layui-layer-rim', //加上边框
              area: ['600px'], //宽高
              content: $("#editSurgery"),

              success: function () {

                form.val("addOrEditSurgeryRoom", {
                  "surgeryRoomId": data.data.surgeryRoomId,
                  "surgeryRoomName": data.data.surgeryRoomName,
                  "useStatus": data.data.useStatus,
                  "situation": data.data.situation,
                  "note": data.data.note
                })
                addOrEditUrl = "/surgeryroom/editsurgerysoom"
                form.render()
              }
            });
          })
        },
        // 打开添加手术页面
        addSurgeryRoom: function () {
          mainIndex = layer.open({
            type: 1,
            title: "添加手术室信息",
            skin: 'layui-layer-rim', //加上边框
            area: ['600px'], //宽高
            content: $("#editSurgery"),
            success: function () {
              $("#editSurgery form")[0].reset()
              addOrEditUrl = "/surgeryroom/addsurgerysoom"
            }

          })
        }
      }
      form.on("submit(editSurgerySubmit)", function (obj) {
        var params = $("#editSurgery form").serialize()
        //alert(params);
        $.post(addOrEditUrl, params, function (data) {
          layer.msg("success")
          //关闭弹出层
          layer.close(mainIndex);
          // 刷新页面
          location.reload();

        })
        return false;
      })
      $('#LAY-component-grid-list .layui-btn').on('click', function () {
        var type = $(this).data('method');
        active[type] ? active[type].call(this) : '';
      })
    })
    /* layui结束 */
    /* Vue 渲染 */
    var app = new Vue({
      el: "#view",
      data: {
        showDetails: true,
        rooms: "",
        data: ""
      },
      methods: {
        getAllSurgeryRoomsAndBookings: function (pageIndex = 1, pageSize = 4) {
          showDetails: true;
          var that = this;
          axios.get("/surgeryroom/roomsandbooking" + "?pageIndex=" + pageIndex +
            "&pageSize=" +
            pageSize).then(
            function (resp) {
              console.log(this)
              //console.log(resp)
              console.log(resp.data)
              if (resp.data.state == 200) {
                that.rooms = resp.data.data
              }
            }).catch(function (error) {
            console.log(error)
          })
        },

      },
      mounted() {
        this.getAllSurgeryRoomsAndBookings()
      }
    })
    /* Vue渲染 */
  </script>
</body>

</html>